<template>
    <div>
       <h1>会员信息录入</h1>
       <table class="table">
        <thead>
            <tr>
                <td>会员名称</td>
                <td>
                    <input type="text" v-model="data.name">
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" v-model="data.pos">
                </td>
            </tr>
            <tr>
                <td>年龄</td>
                <td>
                    <input type="text" v-model="data.age">
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="text" v-model="data.sex">
                </td>
            </tr>
            <tr>
                <td>地址</td>
                <td>
                    <input type="text" v-model="data.addr">
                </td>
            </tr>
            <tr>
                <td>手机号</td>
                <td>
                    <input type="text" v-model="data.phone">
                </td>
            </tr>
            <tr>
                <td>头像</td>
                <td>
                    <input type="file" @change="Upload">
                    <img :src="'https://localhost:7144'+data.img" style="height: 100px;width: 100px;">
                </td>
            </tr>
            <tr>
               
                <td colspan="2">
                    <input type="button" value="添加" @click="Add">
                </td>
            </tr>
        </thead>
       </table>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue"
import axios from "axios";
const data=ref({
    "id": 0,
  "name": "",
  "age": 0,
  "pos": "",
  "sex": 0,
  "addr": "",
  "phone": "",
  "img": ""
})
const Add=()=>{
    axios.post("https://localhost:7144/api/User/AddUser",data.value).then(res=>{
        if(res.data>0){
            alert('添加成功');
            location.href='/ShowView';
        }
        else{
            alert('添加失败');
        }
    })
}
const Upload=(e:any)=>{
    var f=e.target.files[0];
    var fd=new FormData();
    fd.append("file",f);
    axios.post("https://localhost:7144/api/UpLoad/upload",fd).then(res=>{
          data.value.img=res.data;
    })
}

</script>

<style scoped>

</style>